<template>
	<view class="nav">
		<uv-tabs lineHeight="0" :activeStyle="{
			color: '#303133',
			 fontSize: '56rpx'}" :inactiveStyle="{
			     fontSize: '36rpx' 
			   }" :list="list" @click="click">
			<template v-slot:right>
				<view style="padding-left: 4px;" @tap="toast">
					<image src="../../static/images/icon/sousuo.png" alt="" style="width: 26px;height: 26px;" />
				</view>
			</template>
		</uv-tabs>
	</view>
	<!-- 轮播图 -->
	<view class="banner">
		<swiper circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in bannerList" :key="index">
				<image :src="item.imageUrl" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
	</view>
	<!-- 分割线 -->
	<view class="divider"></view>
	<!-- 精品推荐 -->
	<view class="premiumRecommendation">
		<view class="PR_nav">
			<view class="PR_text">
				<text>精品推荐</text>
			</view>
			<view class="Change">
				<text>换一换</text>
				<uv-icon size="32" name="reload"></uv-icon>
			</view>
		</view>
		<view class="PR_grid">
			<uv-grid :col="4" :border="false">
				<uv-grid-item v-for="(item,index) in baseList" :key="index" @click="gotodetailView">
					<!-- <uv-icon :customStyle="{paddingTop:20+'rpx'}" :url="item.url" :size="22"></uv-icon> -->
					<image :src="item.url" mode="" style="width: 75px;height: 87px;"></image>
					<text class="grid-text">{{item.title}}</text>
					<text class="grid-text2">{{item.title2}}</text>
				</uv-grid-item>
			</uv-grid>
		</view>
	</view>
	<!-- 分割线 -->
	<view class="divider"></view>
	<!-- 本周热门 -->
	<view class="premiumRecommendation" style="padding: 5px 20px 27px 20px;">
		<view class="PR_nav">
			<view class="PR_text" style="border-left: 4px solid #02a7f0;">
				<text>本周热门</text>
			</view>
			<view class="More" @click="gotoweekHotView">
				<text>更多</text>
				<uv-icon size="32" name="arrow-right"></uv-icon>
			</view>
		</view>
		<!-- 分类tab -->
		<view class="WH_tabs">
			<view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', activeIndex === index ? 'active' : '']"
				@click="handleTabClick(index)">
				<text>{{ tab }}</text>
			</view>
		</view>
		<view class="PR_grid" style="margin-top: 6px;">
			<uv-grid :col="4" :border="false">
				<uv-grid-item v-for="(item,index) in baseList" :key="index" @click="gotodetailView">
					<!-- <uv-icon :customStyle="{paddingTop:20+'rpx'}" :url="item.url" :size="22"></uv-icon> -->
					<image :src="item.url" mode="" style="width: 75px;height: 87px;"></image>
					<text class="grid-text">{{item.title}}</text>
					<text class="grid-text2">{{item.title2}}</text>
				</uv-grid-item>
			</uv-grid>
		</view>
	</view>
	<!-- 分割线 -->
	<view class="divider"></view>
	<!-- 猜你喜欢 -->
	<view class="recommend-page">
		<!-- 顶部标题栏 -->
		<view class="header">
			<view class="title">
				<view class="title-line"></view>
				<text class="title-text">猜你喜欢</text>
			</view>
			<view class="gender-tabs-container">
				<uv-tabs :list="tabList" :current="currentTab" @change="tabChange" :activeStyle="{
			        color: '#07C160'
			      }" :inactiveStyle="{
			        color: '#666666'
			      }" itemStyle="padding: 0 30rpx; height: 60rpx;"></uv-tabs>
			</view>
		</view>

		<!-- 书籍列表 -->
		<scroll-view scroll-y class="book-list" @scrolltolower="loadMore">
			<view v-for="(item, index) in bookList" :key="index" class="book-item" @click="gotodetailView">
				<view class="book-cover">
					<image :src="item.cover" mode="aspectFill" class="cover-img" />
				</view>
				<view class="book-content">
					<view class="book-header">
						<text class="book-name">{{item.name}}</text>
						<text class="book-score">{{item.score}}</text>
					</view>
					<text class="book-desc">{{item.desc}}</text>
					<text class="book-tags">{{item.tags}}</text>
				</view>
			</view>

			<!-- 加载更多 -->
			<view v-if="loading" class="loading-more">
				<view class="loading-icon"></view>
				<text>努力加载中</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            tabs: ['都市', '玄幻', '异能', '仙侠', '武侠'],
            activeIndex: 0,
            currentTab: 0,
            tabList: [{
                name: '男生',
                title: '男生'
            },
            {
                name: '女生',
                title: '女生'
            }
        ],
        loading: false,
        bookList: [{
            cover: '/static/images/bases/baseimg.png',
            name: '斗罗大陆',
            score: '9.0分',
            desc: '唐门外门弟子唐三偷学内门绝学为唐门所不容，跳崖明志时却发现没有死...',
            tags: '玄幻·唐家三少·3.8万人在读'
        }, {
            cover: '/static/images/bases/baseimg.png',
            name: '斗罗大陆',
            score: '9.0分',
            desc: '唐门外门弟子唐三偷学内门绝学为唐门所不容，跳崖明志时却发现没有死...',
            tags: '玄幻·唐家三少·3.8万人在读'
        }, {
            cover: '/static/images/bases/baseimg.png',
            name: '斗罗大陆',
            score: '9.0分',
            desc: '唐门外门弟子唐三偷学内门绝学为唐门所不容，跳崖明志时却发现没有死...',
            tags: '玄幻·唐家三少·3.8万人在读'
        }],
        baseList: [{
            url: '/static/images/bases/baseimg.png',
            title: '斗罗大陆',
            title2: '唐家三少'
        }, {
            url: '/static/images/bases/baseimg.png',
            title: '斗罗大陆',
            title2: '唐家三少'
        }, {
            url: '/static/images/bases/baseimg.png',
            title: '斗罗大陆',
            title2: '唐家三少'
        }, {
            url: '/static/images/bases/baseimg.png',
            title: '斗罗大陆',
            title2: '唐家三少'
        }, {
            url: '/static/images/bases/baseimg.png',
            title: '斗罗大陆',
            title2: '唐家三少'
        }, {
            url: '/static/images/bases/baseimg.png',
            title: '斗罗大陆',
            title2: '唐家三少'
        }, {
            url: '/static/images/bases/baseimg.png',
            title: '斗罗大陆',
            title2: '唐家三少'
        }, {
            url: '/static/images/bases/baseimg.png',
            title: '斗罗大陆',
            title2: '唐家三少'
        }, {
            url: '/static/images/bases/baseimg.png',
            title: '斗罗大陆',
            title2: '唐家三少'
        }],
        bannerList: [],
        list: [{
            name: '精选'
        }, {
            name: '男生'
        }, {
            name: '女生'
        }, {
            name: '最新上架'
        }]
    }
},
created() {
    this.fetchBanners();
},
methods: {
    click() {

    },
    gotoweekHotView(){
        uni.navigateTo({
            url:'/pages/bookcity/weekHotView'
        })
    },
    gotodetailView(){
        uni.navigateTo({
            url:'/pages/bookcity/detailView'
        })
    },
    switchTab(gender) {
        this.activeTab = gender
        // 这里应添加获取对应性别推荐书籍的逻辑
        this.loadBooks()
    },
    loadBooks() {
        // 实际项目中替换为API请求
        console.log(`加载${this.activeTab === 'male' ? '男生' : '女生'}推荐数据`)
    },
    loadMore() {
        if (this.loading) return
        this.loading = true
        // 模拟加载延迟
        setTimeout(() => {
            this.bookList.push(...this.getMoreBooks())
            this.loading = false
        }, 1000)
    },
    getMoreBooks() {
        // 模拟获取更多书籍
        return [...this.bookList] 
    },
    handleTabClick(index) {
        this.activeIndex = index
    },
    async fetchBanners() {
        try {
            const response = await axios.get('http://localhost:3000/api/banners');
            this.bannerList = response.data;
            // console.log('获取到的轮播图数据:', this.bannerList);
        } catch (error) {
            console.error('获取轮播图数据失败:', error);
        }
    }
}
	}
</script>

<style scoped lang="scss">
	.divider {
		width: 100%;
		height: 10px;
		background-color: #f6f8fa;
	}

	.nav {
		border-width: 0px;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: #FFFFFF;
		padding: 0 20px;
		width: 375px;
		height: 49px;
		display: flex;
	}

	.nav a {
		text-decoration: none;
	}

	::v-deep .uv-tabs__item {
		display: inline-flex !important;
		align-items: center !important;
		vertical-align: middle !important;
	}

	.banner {
		margin-top: 49px;
		margin-bottom: 5rpx;
		padding: 0 20px;
	}

	.banner swiper {
		height: 300rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.banner swiper image {
		width: 100%;
		height: 100%;
	}

	/* 精品推荐 */
	.premiumRecommendation {
		height: 322px;
		padding: 5px 20px 8px 20px;
	}

	.premiumRecommendation .PR_nav {
		width: 100%;
		height: 20px;
		display: flex;
		justify-content: space-between;
	}

	.premiumRecommendation .PR_nav .PR_text {
		width: 65px;
		height: 26px;
		border-left: 4px solid #f59a23;
		padding-left: 8px;
		display: flex;
		align-items: flex-end;
	}

	.premiumRecommendation .PR_nav .Change {
		display: flex;
		height: 26px;
		align-items: center;
		flex-wrap: wrap;
		width: 100px;
		justify-content: space-around;
	}

	.PR_grid {
		margin-top: 20px;
	}

	.PR_grid .uv-grid-item {
		height: 132px;
	}

	.grid-text2 {
		font-size: 14px;
		color: #909399;
	}

	/* 本周热门 */

	.More {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		width: 66px;
		justify-content: space-around;
	}

	.WH_tabs {
	  display: flex;
	  justify-content: space-between;
	  margin-top: 20px;
	  
	  .tab-item {
	    width: 120rpx;
	    height: 62rpx;
	    background-color: #f2f2f2; 
	    border-radius: 62rpx;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    color: #333;
	    transition: all 0.3s ease;
	    
	    text {
	      font-size: 28rpx;
	    }
	    
	    &.active {
	      background-color: #02a7f0; 
	      color: #FFFFFF;
	    }
	  }
	}

	/* 猜你喜欢 */
	.recommend-page {
		background: #fff;
		min-height: 100vh;
	}

	/* 标题栏样式 */
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.title {
		display: flex;
		align-items: center;
	}

	.title-line {
		width: 8rpx;
		height: 45rpx;
		background: #00bfbf;
		margin-right: 16rpx;
	}


	/* 性别标签页 */


	/* 书籍列表 */
	.book-list {
		height: calc(100vh - 100rpx);
		padding: 0 30rpx;
		width: 90%;
	}

	.book-item {
		display: flex;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.book-cover {
		width: 140rpx;
		height: 190rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		overflow: hidden;
		margin-right: 24rpx;
	}

	.cover-img {
		width: 100%;
		height: 100%;
		background: #E6F7FF;
		/* 蓝色背景占位 */
	}

	.book-content {
		flex: 1;
	}

	.book-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.book-name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.book-score {
		font-size: 28rpx;
		color: #FF2B2B;
	}

	.book-desc {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 16rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.book-tags {
		font-size: 24rpx;
		color: #999;
	}

	/* 加载更多 */
	.loading-more {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0;
		color: #999;
	}

	.loading-icon {
		width: 36rpx;
		height: 36rpx;
		border: 4rpx solid rgba(0, 0, 0, 0.1);
		border-top-color: #FFCC00;
		border-radius: 50%;
		margin-right: 16rpx;
		animation: rotate 1s linear infinite;
	}

	@keyframes rotate {
		to {
			transform: rotate(360deg);
		}
	}
</style>